<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>简单jQuery商品属性选择表单</title>
        <meta name="keywords" content="属性选择,jQuery" />
        <meta name="description" content="。" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <style>
            .yListr {
                width: 690px;
                font-family: "微软雅黑";
                margin: 46px auto 0 auto;
            }

            .yListr ul {
                border-bottom: 1px solid #dcdcdc;
                padding-bottom: 10px;
                margin-bottom: 13px;
            }

            .yListr ul li {
                height: 36px;
                margin-bottom: 23px;
            }

            .yListr ul li span {
                color: #000000;
                font-size: 14px;
                line-height: 36px;
                display: inline-block;
                width: 42px;
                padding-left: 4px;
            }

            .yListr ul li em {
                cursor: pointer;
                color: #666666;
                font-size: 14px;
                display: inline-block;
                padding: 0 10px;
                font-style: normal;
                border: 1px solid #dcdcdc;
                line-height: 34px;
                height: 34px;
            }

            .yListr ul li em.selected_sucaihuo {
                line-height: 32px;
                border: 2px solid #e9630a;
                height: 32px;
                position: relative;
                padding: 0 9px;
            }

            .yListr ul li em.selected_sucaihuo i {
                display: block;
                width: 15px;
                height: 14px;
                background: url(images/righbt.png) no-repeat 0 0;
                right: -1px;
                bottom: -1px;
                position: absolute;
            }

            .yListr .colorp00 {
                color: #333333;
                font-size: 18px;
                line-height: 50px;
            }

            .yListr .colorp00 span {
                color: #ed610c;
                font-size: 14px;
                padding-left: 20px;
            }

            .yListr .colorp00 em {
                font-style: normal;
            }

            .yListr form input, .yListr form select {
                outline: none;
                border: 1px solid #dcdcdc;
                width: 86px;
                height: 34px;
                font-size: 14px;
                color: #333333;
                padding-left: 8px;
            }

            .yListr form select {
                height: 36px;
            }

            .yListr form .YImmediatelyininstallment {
                font-size: 24px;
                color: #ffffff;
                text-align: center;
                display: block;
                width: 332px;
                height: 50px;
                line-height: 50px;
                border-radius: 3px;
                background: #e9630a;
                margin-top: 42px;
                border:none
            }
        </style>
    </head>
    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.sucaihuo.com">首 页</a></li>
                    <li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
                    <li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
                </ul>
                <a class="logo" href="http://www.sucaihuo.com"><img src="images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div>
        <div class="container">

            <div class="demo">
                <h2 class="title"><a href="http://www.sucaihuo.com/js/87.html">简单jQuery商品属性选择表单</a></h2>
                <div class="yListr">
                    <form  id="form_sucaihuo" method='post' action='submit.php' onsubmit='return form_check()' >
                        <ul>
                            <li><span>颜色</span> <em class="selected_sucaihuo">深灰色<i></i></em> <em>金色<i></i></em> <em>银色<i></i></em> </li>
                            <li><span>内存</span> <em class="selected_sucaihuo">16G ROM<i></i></em> </li>
                            <li><span>尺寸</span> <em class="selected_sucaihuo">5.5寸<i></i></em> </li>
                            <li><span>尺寸</span> <em class="selected_sucaihuo">港版（二网）<i></i></em> <em>类型<i></i></em>
                            </li>
                        </ul>
                        <p class="colorp00">
                            价值：<em>￥6099.00</em> <span>月供：<em>6281.97</em>元（本金：<em>6099.00</em>元 + 服务费：<em>182.97</em>元）分期
                                x <em>1个月</em></span>
                        </p>
                        <label>
                            首付金额：</label>
                        <input type="text"  name="money"/>
                        <label>
                            元</label>
                        <label style="margin-left: 40px;">
                            分期月数：</label>
                        <select name="month">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>13</option>
                            <option>14</option>
                            <option>15</option>
                            <option>16</option>
                        </select>
                        <input type="submit" class="YImmediatelyininstallment" value="立即分期"/>
                        <input type="hidden" id="selected_sucaihuo" value="" name="selected_sucaihuo"/>
                    </form>
                </div>
            </div>
        </div>
        <div class="foot">
            Powered by sucaihuo.com  本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
        </div>
        <script type="text/javascript" src="js/jquery.js"></script> 
        <script type="text/javascript">
                        $(function() {
                            $(".yListr ul li em").click(function() {
                                $(this).addClass("selected_sucaihuo").siblings().removeClass("selected_sucaihuo");
                            })
                        })
                        function form_check() {
                            var selected_sucaihuo = "";
                            $(".selected_sucaihuo").each(function() {
                                selected_sucaihuo += $(this).text()+",";
                            })
                            $("#selected_sucaihuo").val(selected_sucaihuo);
//                            $("#form_sucaihuo").submit();
                        }
        </script>
    </body>
</html>
